<%--
  Created by IntelliJ IDEA.
  User: asus
  Date: 2018/7/19
  Time: 18:27
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <link rel="stylesheet" href="/static/webjars/layui/css/layui.css"  media="all">
    <link rel="stylesheet" href="/static/base/common/css/sapar.css" />
    <script type="text/javascript" src="/static/webjars/echarts/echarts.js"></script>
    <script type="text/javascript" src="/static/base/index/js/jquery-1.8.0.min.js"></script>
    <script src="/static/webjars/layui/layui.js" charset="utf-8"></script>
    <title>出租房统计</title>
</head>
<body>
<div>
    <div id="rent" style="height: 500px" class="layui-col-lg9 layui-col-xs12 layui-col-sm9"></div>
    <div id="rentpie" style="height: 500px;" class="layui-col-lg3 layui-col-xs12 layui-col-sm3"></div>
</div>
<div class="layui-col-lg12 layui-col-xs12 layui-col-sm12">
<table class="layui-table" >

</table>
</div>
</body>
</html>
<script type="text/javascript">
    var charts = echarts.init(document.getElementById("rent"));

    var xdate=new Array();
    var isrent=new Array();
    var norent=new Array();
    var countryid=new Array();
    var avg=new Array();

    var sumis = 0;
    var sumno = 0;


    $.get("/getRentHouse/town",{},function(data){
        for(var i = 0;i < data.length;i++){
            xdate.push(data[i].townName);
            isrent.push(data[i].isrent);
            norent.push(data[i].norent);
            countryid.push(data[i].townId);
            avg.push(data[i].avg);
        }

        //饼图总和计算
        for(var i = 0;i < isrent.length;i++){
            sumis = sumis + isrent[i];
        }
        for(var i = 0;i < norent.length;i++){
            sumno = sumno + norent[i];
        }


        /////饼图部分
        var piecharts = echarts.init(document.getElementById("rentpie"));
        var option2 = {
            title:{
                text:"已租房与未出租占比",
                x:'center'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                top:'20%',
                data: ['已出租','未出租']
            },
            series : [
                {
                    name: '出租情况',
                    type: 'pie',
                    radius : '55%',
                    center: ['50%', '60%'],
                    data:[
                        {value:sumis, name:'已出租'},
                        {value:sumno, name:'未出租'}
                    ],
                    label:{
                        normal:{
                            formatter:'{b}:\n{c}\n {d}%'
                        }
                    },
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        }

        piecharts.setOption(option2);
        ///柱状图
        charts.setOption(option);
        //表格数据刷新
        var dataItem = new Array();
        for(var i = 0;i < xdate.length;i++){
            var oneitem = {
                "id":countryid[i],
                "area":xdate[i],
                "rent":isrent[i],
                "norent":norent[i],
                "count":isrent[i] + norent[i],
                "avg":avg[i]
            }
            dataItem.push(oneitem);
        }

        layui.use('table', function() {
            var table = layui.table;
            //展示已知数据
            table.render({
                elem: '.layui-table'
                , cols: [[ //标题栏
                    {field: 'id', title: 'ID', width: 80, sort: true}
                    , {field: 'area', title: '地区',minWidth:80, align: 'center'}
                    , {field: 'rent', title: '出租数量', align: 'center'}
                    , {field: 'norent', title: '未出租数量', align: "center"}
                    , {field: 'count', title: '房屋总量', align: "center"}
                    , {field: 'avg', title: '均价', align: "center"}
                ]]
                , data: dataItem,
                even: true
                ,page: true //是否显示分页
                ,limits: [5, 8, 10]
                ,limit: 8 //每页默认显示的数量
                ,height:'full-300'
            });

        });


    });

    /*
    var xdate =  ['中城镇','万寿镇','太平镇','莲花镇','久庆镇','共乐镇','晏阳镇','大坝镇','石林镇','周家镇','久丝城镇'];
    var isrent = [150,    212,     201,     154,     190,     330,     410,     220     , 150   , 300   ,  340];
    var norent = [220,    432,     201,     334,     290,     230,     320,     240     , 310   , 350   ,  400];
    var countryid = ['1001','1002','1003','1004',  '1005',  '1006',  '1007',  '1008',   '1009',  '1010',  '1011'];*/
    option = {
        title:{text:"各乡镇租房统计"},
        tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        legend: {
            data: ['已出租','未出租']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        yAxis:  {
            type: 'value'
        },
        xAxis: {
            type: 'category',
            data: xdate,
            axisLabel:{interval:0}
        },
        dataZoom:{
            show:true,
            startValue:0,
            endValue:5
        },
        series: [
            {
                name: '已出租',
                type: 'bar',
                stack: '总量',
                label: {
                    normal: {
                        show: true,
                        position: 'insideTop'
                    }
                },
                data: isrent
            },
            {
                name: '未出租',
                type: 'bar',
                stack: '总量',
                label: {
                    normal: {
                        show: true,
                        position: 'insideTop'
                    }
                },
                data: norent
            }
        ]
    };

    charts.on('click',function(params){
        var i = params.dataIndex;
        window.location.href="/rentHouseCountDetail?cityid="+countryid[i] + "&cityName=" + params.name;
    });

   // charts.setOption(option);




    //piecharts.setOption(option2);

    /////////////////////表格部分////////////////////
    // var dataItem = new Array();
    // for(var i = 0;i < xdate.length;i++){
    //     var oneitem = {
    //         "id":countryid[i],
    //         "area":xdate[i],
    //         "rent":isrent[i],
    //         "norent":norent[i],
    //         "count":isrent[i] + norent[i],
    //         "avg":"3000"
    //     }
    //     dataItem.push(oneitem);
    // }
    //
    // layui.use('table', function() {
    //     var table = layui.table;
    //     //展示已知数据
    //     table.render({
    //         elem: '.layui-table'
    //         , cols: [[ //标题栏
    //             {field: 'id', title: 'ID', width: 80, sort: true}
    //             , {field: 'area', title: '地区',minWidth:80, align: 'center'}
    //             , {field: 'rent', title: '出租数量', align: 'center'}
    //             , {field: 'norent', title: '未出租数量', align: "center"}
    //             , {field: 'count', title: '房屋总量', align: "center"}
    //             , {field: 'avg', title: '均价', align: "center"}
    //         ]]
    //         , data: dataItem,
    //         even: true
    //         ,page: true //是否显示分页
    //         ,limits: [5, 8, 10]
    //         ,limit: 8 //每页默认显示的数量
    //         ,height:'full-300'
    //     });
    //
    // });


</script>